<template>
  <div class="tool-bar-ri">
    <div class="header-icon">
      <Download id="download" />
      <AssemblySize id="assemblySize" />
      <!-- <Language id="language" /> -->
      <SearchMenu id="searchMenu" />
      <ThemeSetting id="themeSetting" />
      <!-- <Message id="message" /> -->
      <Fullscreen id="fullscreen" />
    </div>
    <!-- 顶部用户名 -->
    <span class="username">{{ username }}</span>
    <span class="storeName" @click="openStore">
      {{ storeName }}
      <el-icon><ArrowDownBold /></el-icon>
    </span>
    <Avatar />

    <!-- 抽屉 -->
    <StoreDrawer
      :page-num="pageNum"
      :store-list-object="storeListObject"
      @close-drawer="isDrawer = false"
      :is-drawer="isDrawer"
      @get-store-list="searchStore"
      @change-store="changeStore"
      :group-info="groupInfo"
      @handle-current-change="handleCurrentChange"
      @change-group="changeStore"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { useUserStore } from "@/stores/modules/user";
import AssemblySize from "./components/AssemblySize.vue";
import Download from "./components/Download.vue";
// import Language from "./components/Language.vue";
import SearchMenu from "./components/SearchMenu.vue";
import ThemeSetting from "./components/ThemeSetting.vue";
// import Message from "./components/Message.vue";
import Fullscreen from "./components/Fullscreen.vue";
import Avatar from "./components/Avatar.vue";
import { switchStoresAPI, getMerchantSystemAPI } from "@/api/modules/user";
import { getGroupStoreList } from "@/api/modules/operation";
import { Operation } from "@/api/interface/index";
import { useAuthStore } from "@/stores/modules/auth";
import StoreDrawer from "./components/StoreDrawer.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const userStore = useUserStore();
const authStore = useAuthStore();
const username = computed(() => userStore.userInfo.userName);
const storeName = computed(() => userStore.store.storeName);
const groupInfo = ref<any>({});

// open门店
const isDrawer = ref(false);
const pageNum = ref(1);
const currentPageNum = ref(1);
const storeListObject = ref<{
  list: Operation.ResGroupStoreList[];
  total: number;
  pageNum: number;
  pageSize: number;
}>({ list: [], total: 0, pageNum: 1, pageSize: 20 });
const IsCrop = ref(false);
const IsGroup = ref(false);

const getStoreList = async (storeName?: string | void, isCrop?: boolean, isGroup?: boolean, isFirst?: boolean) => {
  const res = await getGroupStoreList({
    groupId: userStore.store.groupId,
    pageNum: currentPageNum.value,
    pageSize: 20,
    storeName,
    isCrop: isFirst ? (groupInfo.value.isCrop ? 1 : 0) : groupInfo.value.isCrop && isCrop ? 1 : 0,
    isGroup: isFirst ? (groupInfo.value.isGroup ? 1 : 0) : groupInfo.value.isGroup && isGroup ? 1 : 0
    // isGroup: groupInfo.value.isCrop ? 1 : 0
  });
  storeListObject.value = res.data;
};
const getGroupStoreInfo = async () => {
  const res = await getMerchantSystemAPI({ storeId: userStore.store.id });
  groupInfo.value = res.data;
  IsCrop.value = res.data.isCrop;
  IsGroup.value = res.data.isGroup;
};

const isFirst = ref(true);
const openStore = async () => {
  // 打开弹框
  currentPageNum.value = 1;
  pageNum.value = 1;
  isFirst.value = true;
  await getGroupStoreInfo();
  await getStoreList("", false, false, isFirst.value);
  isDrawer.value = true;
  isFirst.value = false;
};

// 切换门店
const changeStore = async (e: { id: number | string; type: string }) => {
  // 判断是否是主店并且点击主店
  IsCrop.value = e.type === "sum" ? true : false;
  IsGroup.value = e.type === "group" ? true : false;
  if (e.type !== "item" && groupInfo.value.canSwitch) {
    getStoreList("", e.type === "sum" ? true : false, e.type === "group" ? true : false);
    return;
  }
  // 切换门店
  const { data } = await switchStoresAPI({ storeId: e.id });
  userStore.setToken(`${data.token.token_type} ${data.token.token}`);
  userStore.setUserInfo(data.sysUser);
  userStore.setStore(data.store);
  // 1.获取菜单列表 && 按钮权限列表
  await authStore.getAuthMenuList();
  await authStore.getAuthButtonList();
  isDrawer.value = false;
  // 跳转并强制刷新
  router.push("/").then(() => {
    window.location.reload();
  });
};

// 改变页数
const handleCurrentChange = (e: number) => {
  currentPageNum.value = e;
  pageNum.value = e;
  getStoreList(searchStoreName.value, IsCrop.value, IsGroup.value, false);
};
// 搜索门店
const searchStoreName = ref("");
const searchStore = (e: string) => {
  searchStoreName.value = e;
  currentPageNum.value = 1;
  pageNum.value = 1;
  getStoreList(e, IsCrop.value, IsGroup.value, false);
};
</script>

<style scoped lang="scss">
.tool-bar-ri {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 25px;
  .header-icon {
    display: flex;
    align-items: center;
    & > * {
      margin-left: 21px;
      color: var(--el-header-text-color);
    }
  }
  .username {
    margin: 0 20px;
    font-size: 15px;
    color: var(--el-header-text-color);
  }
  .storeName {
    padding: 5px 10px;
    margin: 0 20px;
    font-size: 15px;
    color: #666768;
    cursor: pointer;
    border: 1px solid #e5e8ed;
    border-radius: 5px;
  }
  .storeName:hover {
    color: #fdc31d;
    border-color: #fdc31d;
  }
}
</style>
